// 向老师提问页面
<template>
	<div id="message">
		<h1 class="title">{{this.$route.query.questionTitle}}</h1>
		<div class="wrapper">
			<div class="all">
				<ul class="msglist">
					<!--标题-->
					<li class="list">
						<div style="margin-top: 20px;">
							<div style="float: left;"><img src="../../../static/img/tx.jpg" class="img3"></img></div>
							<div><span style="margin-left: 15px;">{{this.$route.query.username}}（楼主） &nbsp;&nbsp;&nbsp;
									{{this.$route.query.date}}
								</span></div>
						</div>
						<p class="qtitle"> <i class="iconfont icon-untitled33"></i> {{this.$route.query.content}}</p>
						<span class="replay" @click="replyQ()">回复</span>
					</li>
					<!--用户的第一次留言-->
					<li class="list" v-for="(data,index) in msg" :key="index">
						<div style="margin-top: 20px;">
							<div style="float: left;"><img src="../../../static/img/tx.jpg" class="img3"></img></div>
							<div>
								<p><span style="margin-left: 15px;">{{data.user.userName}} </span></p>
								<span style="margin-left: 15px;">{{data.replyTime}}</span>
								<span class="replay" @click="replyReply(data.replyId)">回复</span>
							</div>
						</div>
						<p class="review">{{data.replyContent}}</p>
            <el-collapse @change="replyRe(data.replyId)">
							<el-collapse-item class="re03">
								<template slot="title">
									<span style="margin-left: 20px;">查看回复</span>
								</template>
								<ul class="msglist">
									<li class="list1" v-for="(data1,index) in msg1" :key="index">
										<div style="margin-top: 20px;">
											<div style="float: left;"><img src="../../../static/img/tx.jpg" class="img3"></img></div>
											<div>
												<p><span style="margin-left: 15px;">{{data1.user.userName}} </span></p>
												<span style="margin-left: 15px;">{{data1.replyTime}}</span>
											</div>
										</div>
										<p class="review" style="margin-bottom: 20px;">{{data1.replyContent}}</p>
									</li>
								</ul>
							</el-collapse-item>
						</el-collapse>
					</li>
				</ul>
			</div>


			<div class="pagination">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.current"
				 :page-sizes="[4,6,8,10]" :page-size="pagination.size" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total">
				</el-pagination>
			</div>
		</div>
	</div>

</template>

<script>
	import 'quill/dist/quill.core.css'
	import 'quill/dist/quill.snow.css'
	import 'quill/dist/quill.bubble.css'

	import {
		quillEditor
	} from 'vue-quill-editor'

	export default {
		// name: 'message'
		data() {
			return {
				flag: false,
				current: 0,
				title: "",
				content: "",
				editorOption: {
					placeholder: '编辑回复内容'
				},
				pagination: { //分页后的留言列表
					current: 1, //当前页
					total: null, //记录条数
					size: 8 //每页条数
				},
				msg: [],
				msg1: [],
				msg3: '',
				user: {
					userName: ''
				},

			}
		},
		created() {
			this.init()
		},
		methods: {
			init() {
				console.log(this.$route.query.questionId)
				let qid = this.$route.query.questionId
				this.$axios('/api/getReWithoutPid', {
					params: {
						questionId: qid,
						page: this.pagination.current,
						size: this.pagination.size
					}
				}).then(res => {
					for (var i = 0; i < res.data.records.length; i++) {
						res.data.records[i].replyTime = this.renderTime(res.data.records[i].replyTime)

					}
					this.msg = res.data.records
					this.$route.query.date = this.renderTime(this.$route.query.date)

				})
			},
			replyRe(parentId) {
				console.log("id:" + parentId)
				this.$axios('/api/getReplyRe', {
					params: {
						parentId: parentId,
					}
				}).then(res => {
					if (res.data.length == 0) {
						this.$message({
							type: 'info',
							message: '无数据'
						})
						this.msg1 = res.data
					} else {

						for (var i = 0; i < res.data.length; i++) {
							res.data[i].replyTime = this.renderTime(res.data[i].replyTime)
						}
						this.msg1 = res.data
					}
				})
			},
			//改变当前记录条数
			handleSizeChange(val) {
				this.pagination.size = val
				this.getMsg()
			},
			//改变当前页码，重新发送请求
			handleCurrentChange(val) {
				this.pagination.current = val
				this.getMsg()
			},
			replyQ() { //回复留言功能
				this.$prompt('回复问题', '回复', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					inputPattern: /^[\s\S]*.*[^\s][\s\S]*$/,
					inputErrorMessage: '回复不能为空'
				}).then(({
					value
				}) => {
					var userId = this.$cookies.get('cid')
					let date = new Date()
					this.$axios({
						url: '/api/insertReply',
						method: 'post',
						data: {
							question: {
								questionId: this.$route.query.questionId
							},
							user: {
								userId: userId
							},
							replyContent: value

						}
					}).then(res => {
						this.init()
					})
					this.$message({
						type: 'success',
						message: '回复成功'
					});
				})
			},
			replyReply(replyId) { //回复留言功能
				this.$prompt('回复留言', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					inputPattern: /^[\s\S]*.*[^\s][\s\S]*$/,
					inputErrorMessage: '回复不能为空'
				}).then(({
					value
				}) => {
					let date = new Date()
					var userId = this.$cookies.get('cid')
					this.$axios({
						url: '/api/insertReply',
						method: 'post',
						data: {
							parentId: replyId,
							replyContent: value,
							user: {
								userId: userId
							},
							question: {
								questionId: this.$route.query.questionId
							}
						}
					}).then(res => {
						this.init()
					})
					this.$message({
						type: 'success',
						message: '回复成功'
					});
				})
			},
			onEditorChange({
				editor,
				html,
				text
			}) {
				this.content = html;
			},
			enter(index) {
				this.flag = true
				this.current = index
			},

			leave(index) {
				this.flag = false;
				this.current = index;
			},
			renderTime(date) {
				var dateee = new Date(date).toJSON();
				var time1 = new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
				console.log(time1)
				this.$route.query.date = time1
				return time1
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pagination {
		display: flex;
		justify-content: center;
	}

	#message {
		width: 980px;
		margin: 0 auto;
	}

	.count {
		margin-bottom: 20px;
		font-size: 18px;
	}

	.dz {
		margin-top: 20px;
		margin-left: 20px;
		width: 18px;
		height: 18px;
	}

	.review {
		margin-left: 20px;
		font-size: 17px;
		margin-top: 40px;
	}


	.re03>>>.el-collapse-item__header {
		background-color: rgb(238, 238, 238) !important;
	}

	.qtitle {
		margin-left: 20px;
		font-size: 25px;
		margin-top: 40px;
		margin-bottom: 20px;
	}

	.title {
		margin: 20px;


	}

	.content {
		padding: 20px 0px;
	}

	.img3 {
		width: 45px;
		height: 45px;
		padding-left: 30px;
	}



	#message {
		.btn {
			padding-bottom: 20px;
		}

		.all {
			.date {
				color: rgb(80, 157, 202);
				line-height: 45px;
				font-size: 13px;
			}

			.list {

				background-color: #eee;
				padding: 10px;
				border-radius: 4px;
				margin: 20px 0px;
				position: relative;
				transition: all .3s ease;
				font-size: 15px;

				.title {
					color: #5f5f5f;
					margin: 0px;
					font-size: 13px;
					line-height: 30px;
				}

				.content {
					padding: 0px;
				}

				.icon-untitled33 {
					font-size: 13px;
					margin-right: 4px;
				}

				.icon-date {
					font-size: 13px;
					margin-right: 4px;
					color: rgb(80, 157, 202);
				}

				.replay {
					position: absolute;
					right: 60px;
					top: 110px;
					color: tomato;
					cursor: pointer;
					transition: all .3s ease;
				}

				.el-icon-star-off {
					position: absolute;
					right: 30px;
					size: 20px;
				}

				.comment {
					margin: -7px 0px;
					padding-bottom: 12px;
					font-size: 17px;
					color: #28b2b4;

					i {
						margin-right: 4px;
					}
				}
			}

			.list1 {
				width: 90%;
				background-color: #eee;
				padding: 10px;
				border-radius: 4px;
				margin: 20px 0px;
				position: relative;
				transition: all .3s ease;
				font-size: 15px;
				margin-left: 4%;

				.title {
					color: #5f5f5f;
					margin: 0px;
					font-size: 13px;
					line-height: 30px;
				}

				.content {
					padding: 0px;

				}

				.icon-untitled33 {
					font-size: 13px;
					margin-right: 4px;
				}

				.icon-date {
					font-size: 13px;
					margin-right: 4px;
					color: rgb(80, 157, 202);
				}

				.replay {
					position: absolute;
					right: 60px;
					top: 80px;
					color: tomato;
					cursor: pointer;
					transition: all .3s ease;
				}

				.el-icon-star-off {
					position: absolute;
					right: 30px;
					size: 20px;
				}

				.comment {
					margin: -7px 0px;
					padding-bottom: 12px;
					font-size: 17px;
					color: #28b2b4;

					i {
						margin-right: 4px;
					}
				}
			}



		}
	}

	#message .wrapper {
		background-color: #fff;
		padding: 20px;

	}
</style>
